<template>
  <div>
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>店铺余额</span>
        </div>
      </template>
      <div class="balance-info">
        <div class="balance-item">
          <div class="balance-label">账户余额</div>
          <div class="balance-amount">¥ {{ data.balance }}</div>
        </div>
        <div class="balance-item">
          <div class="balance-label">更新时间</div>
          <div class="balance-amount">{{ data.updateTime }}</div>
        </div>
      </div>
      
      <div style="margin-top: 30px;">
        <el-button type="primary" @click="handleWithdraw">提现</el-button>
        <el-button type="success" @click="handleRecharge">充值</el-button>
      </div>
    </el-card>

    <el-card class="box-card" style="margin-top: 20px;">
      <template #header>
        <div class="card-header">
          <span>余额明细</span>
        </div>
      </template>
      <el-table :data="data.transactionList" stripe>
        <el-table-column label="交易时间" prop="time"></el-table-column>
        <el-table-column label="交易类型" prop="type">
          <template #default="scope">
            <el-tag v-if="scope.row.type === '收入'" type="success">{{ scope.row.type }}</el-tag>
            <el-tag v-else type="danger">{{ scope.row.type }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="交易金额" prop="amount"></el-table-column>
        <el-table-column label="交易后余额" prop="balance"></el-table-column>
        <el-table-column label="备注" prop="remark"></el-table-column>
      </el-table>
      
      <div style="margin-top: 20px;">
        <el-pagination 
          background 
          layout="prev, pager, next" 
          :page-size="data.pageSize" 
          :current-page="data.pageNum" 
          :total="data.total"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 提现对话框 -->
    <el-dialog title="提现" width="40%" v-model="data.withdrawVisible" :close-on-click-modal="false">
      <el-form :model="data.withdrawForm" label-width="100px" style="padding-right: 50px">
        <el-form-item label="提现金额" prop="amount">
          <el-input v-model="data.withdrawForm.amount" autocomplete="off" />
        </el-form-item>
        <el-form-item label="提现方式" prop="method">
          <el-select v-model="data.withdrawForm.method" placeholder="请选择提现方式">
            <el-option label="银行卡" value="bank"></el-option>
            <el-option label="支付宝" value="alipay"></el-option>
            <el-option label="微信" value="wechat"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="账户信息" prop="account">
          <el-input v-model="data.withdrawForm.account" autocomplete="off" placeholder="请输入账户信息" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="data.withdrawVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitWithdraw">确 定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 充值对话框 -->
    <el-dialog title="充值" width="40%" v-model="data.rechargeVisible" :close-on-click-modal="false">
      <el-form :model="data.rechargeForm" label-width="100px" style="padding-right: 50px">
        <el-form-item label="充值金额" prop="amount">
          <el-input v-model="data.rechargeForm.amount" autocomplete="off" />
        </el-form-item>
        <el-form-item label="充值方式" prop="method">
          <el-select v-model="data.rechargeForm.method" placeholder="请选择充值方式">
            <el-option label="银行卡" value="bank"></el-option>
            <el-option label="支付宝" value="alipay"></el-option>
            <el-option label="微信" value="wechat"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="data.rechargeVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitRecharge">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { getMerchantBalance } from "@/api/index.js";

const data = reactive({
  balance: 0.00,
  updateTime: '',
  pageNum: 1,
  pageSize: 10,
  total: 0,  // 总条数
  withdrawVisible: false,
  rechargeVisible: false,
  withdrawForm: {},
  rechargeForm: {},
  transactionList: [
    { time: '2025-09-20 10:30:00', type: '收入', amount: '+¥1200.00', balance: '¥10000.00', remark: '商品销售' },
    { time: '2025-09-19 15:45:00', type: '支出', amount: '-¥200.00', balance: '¥8800.00', remark: '提现手续费' },
    { time: '2025-09-18 09:15:00', type: '收入', amount: '+¥3500.00', balance: '¥9000.00', remark: '商品销售' }
  ]
})

// 获取商家余额信息
const fetchMerchantBalance = async () => {
  try {
    const res = await getMerchantBalance();
    if (res.code === 200) {
      data.balance = res.data.balance;
      data.updateTime = res.data.updatedAt ? new Date(res.data.updatedAt).toLocaleString() : '';
    } else {
      ElMessage.error(res.message || '获取余额信息失败');
    }
  } catch (err) {
    ElMessage.error('获取余额信息失败: ' + err.message);
  }
}

onMounted(() => {
  fetchMerchantBalance();
})

const handleWithdraw = () => {
  data.withdrawForm = {}
  data.withdrawVisible = true
}

const handleRecharge = () => {
  data.rechargeForm = {}
  data.rechargeVisible = true
}


// 处理分页变化
const handleCurrentChange = (val) => {
  data.pageNum = val
  // 这里可以添加加载数据的逻辑
  console.log("页码变化到: ", val);
}

const submitWithdraw = () => {
  // 这里需要替换为实际的提现接口
  ElMessage.success('提现申请已提交')
  data.withdrawVisible = false
}

const submitRecharge = () => {
  // 这里需要替换为实际的充值接口
  ElMessage.success('充值申请已提交')
  data.rechargeVisible = false
}

</script>

<style scoped>
.balance-info {
  display: flex;
  justify-content: space-between;
}

.balance-item {
  text-align: center;
  flex: 1;
}

.balance-label {
  font-size: 16px;
  color: #666;
  margin-bottom: 10px;
}

.balance-amount {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.card-header {
  font-size: 18px;
  font-weight: bold;
}
</style>